<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits, defineProps } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { baseURL } from '@/utils/request'
import { uploadNewsImgApi } from '@/api/upload'

const emit = defineEmits(['editorChange'])

const editorRef = shallowRef()

const valueHtml = ref()

const toolbarConfig = {
    excludeKeys: [
        'group-video',
        // 'fullScreen'
    ]
}

const props = defineProps({
    content: String
})

const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            async customUpload(file, insertFn) {
                const result = await uploadNewsImgApi(file)
                insertFn(result.data.url)
            }
        }
    }
}

const handleChange = () => {
    emit('editorChange', valueHtml.value)
}


onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor
    valueHtml.value = props.content
}


</script>   
<template>
    <div style="border: 1px solid #ccc; z-index: 999">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
        <Editor style="height: 390px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
            @onCreated="handleCreated" @onChange="handleChange" />
    </div>
</template>

<style lang='less' scoped></style>